<template>
<div>
    <h1 style="text-align: center; margin: 20px auto;">保单查询</h1>
        <Form :model="formItem" :label-width="100" style="width: 480px; margin: 0 auto" show-message>
            <FormItem label="保单号码：" required>
                <Input v-model="formItem.policy" placeholder="请输入保险单号码..."/>
            </FormItem>
            <FormItem label="证件号码：" required>
                <Input v-model="formItem.certificate" placeholder="请输入保单对应的证件号码..."/>
            </FormItem>
            <FormItem label="手机号：" required>
                <Input v-model="formItem.phone" placeholder="请输入保单对应的手机号..."/>
            </FormItem>
            <FormItem label="验证码：" required>
                <Row>
                    <Col span="14">
                        <Input v-model="formItem.captcha" placeholder="请输入验证码..."/>
                    </Col>
                    <Col span="2" style="text-align: center">-</Col>
                    <Col span="7">
                        <Button type="primary" @click="getCaptcha">获取验证码</Button>
                    </Col>
                </Row>
            </FormItem>

            <FormItem>
                <Button type="primary" @click="policyConsult">查询</Button>
                <Button style="margin-left: 8px" @click="clear">清空</Button>
            </FormItem>
        </Form>
</div>
</template>

<script>
    import axios from "axios"
    export default {
        name: "Search",
        data () {
            return {
                formItem: {
                    policy: '',
                    certificate: '',
                    phone: '',
                    captcha: '',
                }
            }
        },
        methods: {
            getCaptcha () {
              axios.post('http://47.102.214.198/getPhoneVerifyCode/', this.$qs.stringify({
                phone: this.formItem.phone
              })).then(res => {
                if (res.status === 200) {
                  this.$Message.info(res.data.msg)
                }
              })
            },
            policyConsult () {},
            clear () {

            }

        }
    }
</script>

<style scoped>

</style>